<template>
  <div class="catalogue-wrap">
    <div
      class="catalogue-header header1 click"
      v-for="(head1, index1) in catalogueList"
      :key="index1"
    >
      <div
        class="catalogue-header-content"
        :class="active == head1.blockIndex ? 'active' : ''"
      >
        <img
          v-if="head1.child.length > 0"
          @click="head1.open = !head1.open"
          :src="
            head1.open
              ? require('../assets/img/downarrow.png')
              : require('../assets/img/rightarrow.png')
          "
        />
        <span
          class="catalogue-header-title"
          @click="
            jumpTo(head1);
            active = head1.blockIndex;
          "
          >{{ head1.data.text }}</span
        >
      </div>
      <div class="header2-wrap" v-if="head1.child && head1.open">
        <div
          class="catalogue-header header2 click"
          v-for="(head2, index2) in head1.child"
          :key="index2"
        >
          <div
            class="catalogue-header-content"
            :class="active == head2.blockIndex ? 'active' : ''"
          >
            <img
              v-if="head2.child.length > 0"
              @click="head2.open = !head2.open"
              :src="
                head2.open
                  ? require('../assets/img/downarrow.png')
                  : require('../assets/img/rightarrow.png')
              "
              alt=""
            />
            <span
              class="catalogue-header-title"
              @click="
                jumpTo(head2);
                active = head2.blockIndex;
              "
              >{{ head2.data.text }}</span
            >
          </div>
          <div class="header3-wrap" v-if="head2.child && head2.open">
            <div
              class="catalogue-header header3 click"
              v-for="(head3, index3) in head2.child"
              :key="index3"
            >
              <div
                class="catalogue-header-content"
                :class="active == head3.blockIndex ? 'active' : ''"
              >
                <img src="" />
                <span
                  class="catalogue-header-title"
                  @click="
                    jumpTo(head3);
                    active = head3.blockIndex;
                  "
                  >{{ head3.data.text }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      catalogueList: [],
      active: -1,
    };
  },
  computed: {
    currentPageBlocks() {
      return this.$store.state.currentPageBlocks;
    },
  },
  created() {
    this.getCatalogueList();
  },
  watch: {
    currentPageBlocks() {
      this.getCatalogueList();
    },
  },
  methods: {
    getCatalogueList() {
      this.catalogueList = [];
      this.currentPageBlocks.map((item, index) => {
        if (
          item.type == "heading1" ||
          item.type == "heading2" ||
          item.type == "heading3"
        ) {
          if (item.type == "heading1")
            this.catalogueList.push({
              ...item,
              blockIndex: index,
              open: true,
              child: [],
            });
          if (this.catalogueList.length > 0) {
            var arr2 = this.catalogueList[this.catalogueList.length - 1].child;
            if (item.type == "heading2")
              arr2.push({
                ...item,
                blockIndex: index,
                open: true,
                child: [],
              });
            if (arr2[arr2.length - 1] && arr2.length > 0) {
              var arr3 = arr2[arr2.length - 1].child;
              if (item.type == "heading3")
                arr3.push({
                  ...item,
                  blockIndex: index,
                });
            }
          }
        }
      });
    },
    jumpTo(item) {
      var dom = document.getElementsByClassName("edit");
      var el = dom[item.blockIndex];
      var top = el.getBoundingClientRect().top + window.pageYOffset;
      document.body.scrollTop = document.documentElement.scrollTop = top;
    },
  },
};
</script>

<style lang="less" scoped>
.catalogue-wrap {
  // position: sticky;
  position: fixed;
  z-index: 99999;
  background-color: #fff;
  top: 100px;
  left: 0px;
  min-width: 200px;
  padding: 30px 0;
  .catalogue-header-content {
    height: 35px;
    display: flex;
    align-items: center;
    border-right: 3px solid #eee;
    img {
      width: 18px;
      cursor: pointer;
      padding-right: 4px;
    }
    span {
      flex: 1;
    }
  }
  .catalogue-header-content.active {
    font-weight: 550;
    border-color: rgb(64, 158, 255);
  }
  .header1 {
    height: auto;
    font-size: 17px;
    .catalogue-header-content {
      padding-left: 20px;
    }
    .header2 {
      font-size: 16px;
      .catalogue-header-content {
        padding-left: 30px;
      }
    }
    .header3 {
      font-size: 15px;
      .catalogue-header-content {
        padding-left: 40px;
      }
    }
  }
}
</style>